<template>
  <n-card content-style="padding: 10px;" header-style="padding: 10px;" footer-style="padding: 10px">
    <template #header>
      用户信息管理
    </template>
    <template #header-extra>
      <n-button circle>
        <template #icon>
          <n-icon>
            <i class="fa fa-refresh" />
          </n-icon>
        </template>
      </n-button>
    </template>
    <n-grid cols="1 s:2 m:3" responsive="screen" :y-gap="5" :x-gap="5" style="margin-bottom: 10px">
      <n-grid-item>
        <n-input-group>
          <n-date-picker v-model:value="search.rangeTime" type="daterange" clearable />
        </n-input-group>
      </n-grid-item>
      <n-grid-item>
        <n-input-group>
          <n-select v-model:value="search.searchType" placeholder="搜索条目" :style="{ width: '200px' }" :options="[{
          label: '用户ID',
          value: 'userId'
        },{
          label: '用户名',
          value: 'userName'
        }]" />
          <n-input v-model:value="search.searchText" placeholder="请输入搜索内容"/>
          <n-button ghost @click="loadUsers(1,10)">
            搜索
          </n-button>
        </n-input-group>
      </n-grid-item>
    </n-grid>
    <n-data-table
        :columns="columns"
        :data="usersData"
        min-height="250px"
        :bordered="false"
    />
    <n-pagination @update:page="page.onChange" @update:page-size="page.onUpdatePageSize" v-model:page="page.page" :item-count="page.itemCount" :page-count="page.pageCount" :page-slot="7" style="justify-content: center;margin-top: 5px"/>
  </n-card>
</template>

<script>

import {NButton} from "naive-ui";
import {h} from "vue";

export default {
  name: "MaintainOfUsersTemplate",
  data(){
    return{
      search:{
        rangeTime:undefined,
        searchType:undefined,
        searchText:undefined,
      },
      usersData:[],
      columns:[
        {
          title: "ID",
          key: "userId"
        },
        {
          title: "用户名",
          key: "userAccount",
        },
        {
          title: "注册时间",
          key: "userCreatetime",
          render:(row)=>{return this.$utils.dataUtil(row.userCreatetime)}
        },
        {
          title: "待还款信用卡",
          key: "repayCount",
        },
        {
          title:'操作',
          key:'option',
          render:this.readerClickDelete
        }
      ],
      page:{
        page: 2,
        pageSize: 10,
        itemCount:100,
        onChange: (page) => {
          this.loadUsers(page,this.page.pageSize)
        },
        onUpdatePageSize: (pageSize) => {
          this.loadUsers(this.page.page,pageSize)
        }
      }
    }
  },
  methods:{
    loadUsers:async function (index,size){
      const search=this.search;
      await this.axios.post("/user/selectUsersBySelective",{
        startTime:!search.rangeTime?undefined:search.rangeTime[0],
        endTime:!search.rangeTime?undefined:search.rangeTime[1],
        searchType:search.searchType,
        searchText:search.searchText,
        pageIndex:index,
        pageSize:size
      }).then((res)=>{
        const data=res.data;//获取数据
        this.usersData=data.data.data;
        this.page.page=data.data.pageIndex;
        this.page.pageSize=data.data.pageSize;
        this.page.itemCount=data.data.itemCount;
      })
    },
    readerClickDelete:function (row){
      const _this=this;
      return h(NButton, {
        size: "small",
        onClick:()=>{
          _this.axios.post("/user/deleteUserByIdAndAccount",{
            userId:row.userId,
            userAccount:row.userAccount
          }).then((res)=>{
            const data=res.data;
            let msg;
            if (data.code>0) {
              msg=data.error;
            }else {
              msg=data.data;
            }
            if (_this.$utils.tipsOption(data.code, data.status, msg)) {
              return
            }
            _this.loadUsers(0,10)
          })
        }
      }, { default: () => "删除" });
    }
  },
  mounted() {
    this.loadUsers(1,10);
  }
}
</script>

<style scoped>

</style>